<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>查看评论</title>
    <link rel="stylesheet" th:href="@{/static/admin/layui/css/layui.css}" media="all">
    <script th:src="@{/static/admin/layui/layui.js}"></script>
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

    <!--这里要改成自己的资源路径-->
    <style>
        body {
            margin: 50px;
        }
        .layui-table-cell{
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>

<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查看评论</legend>
</fieldset>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script th:src="@{/static/static/admin/layui/layui.js}"></script>
<!--这里要改成自己的资源路径-->
<script>
    layui.use('table', function() {
        var table = layui.table; //表格


        //向世界问个好
        layer.msg('Hello World');

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            height: 600,
            width: 1200,
            url: '/admin/getCommentList',//数据接口
            title: '类型表',
            page: true, //开启分页
            toolbar: 'default' ,//开启工具栏，此处显示默认图标，可以自定义模板，详见文档,
            totalRow: true ,//开启合计行
            cols: [//表头
                [
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: '编号', width: 80, sort: true },
                    { field: 'articleId', title: '文章 I D', width: 200 },
                    { field: 'answererId', title: '评论人 I D', width: 100 },
                    { field: 'content', title: '评论内容', width: 300 },
                    { field: 'createTimeStr', title: '评论时间', width: 200 , sort: true },
                    { fixed: 'right', title:'操作',width: 250, align: 'center', toolbar: '#barDemo' }
                ]
            ]
        });

        //监听 头 工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch(obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    } else if(data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });
        //监听 行 工具事件
        table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data ,//获得当前行数据
                layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail') {
                layer.msg('查看操作');
            } else if(layEvent === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type:"post",
                        url:"/admin/deleteComment",
                        dataType: "json",
                        data:{'id':data.id},
                        success:function(result){
                            if(result.status==200){
                                layer.msg("删除成功", {icon: 6});
                                setTimeout(function () {
                                    obj.del(); //删除对应行（tr）的DOM结构
                                    layer.close(index);
                                },1000)

                            }else {
                                layer.msg("删除失败", {icon: 5})
                            }
                        }
                    })

                });
            } else if(layEvent === 'edit') {
                layer.msg('编辑操作:<br>' + JSON.stringify(data));
            }
        });
    });


</script>

</html>